import React, { useState } from "react";
import { Form, Button, Tree, Card, Divider } from "antd";
import type { TreeProps } from "antd/es/tree";

// 添加接口定义
interface ProjectConfigFormProps {
  form: any;
  onFormChange: (changedFields: any, allFields: any) => void;
  videoMaterials: any[];
  onCreateProject: () => void;
  onConfigTypeChange: (configType: string, title: string) => void;
}

// 右侧的动态表单
const ProjectConfigFormTree: React.FC<ProjectConfigFormProps> = ({
  form,
  onFormChange,
  videoMaterials,
  onCreateProject,
  onConfigTypeChange,
}) => {
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [expandedKeys, setExpandedKeys] = useState<string[]>(["root", "text"]);
  // 处理树节点点击
  const onSelect: TreeProps["onSelect"] = (selectedKeysValue, info) => {
    const key = selectedKeysValue[0] as string;
    if (key && key !== "root" && key !== "text" && key !== "audio") {
      const title = getConfigTitle(key);
      onConfigTypeChange(key, title);
    }
    setSelectedKeys(selectedKeysValue as string[]);
  };

  const onExpand: TreeProps["onExpand"] = (expandedKeysValue) => {
    setExpandedKeys(expandedKeysValue as string[]);
  };

  // 获取配置标题
  const getConfigTitle = (key: string): string => {
    const titleMap: { [key: string]: string } = {
      canvas: "画布配置",
      "text-basic": "文本基本配置",
      "text-border": "文本边框配置",
      "text-background": "文本背景配置",
      "text-animation": "文本动画配置",
      "video-materials": "视频素材配置",
    };

    // 处理单个视频素材的配置标题
    if (key.startsWith("video-material-")) {
      const index = parseInt(key.replace("video-material-", ""));
      const material = videoMaterials[index];
      return material
        ? `${material.material.name || `视频素材 ${index + 1}`} - 配置`
        : "视频素材配置";
    }

    return titleMap[key] || "配置";
  };

  // 动态生成树形数据结构
  const generateTreeData = () => {
    // 生成视频素材子节点
    const videoMaterialNodes = videoMaterials.map((material, index) => ({
      title: material.material.name || `视频素材 ${index + 1}`,
      key: `video-material-${index}`,
      isLeaf: true,
    }));

    return [
      {
        title: "项目配置",
        key: "root",
        children: [
          {
            title: "画布配置",
            key: "canvas",
          },
          {
            title: "文本配置",
            key: "text",
            children: [
              {
                title: "基本配置",
                key: "text-basic",
              },
              {
                title: "文本边框",
                key: "text-border",
              },
              {
                title: "文本背景",
                key: "text-background",
              },
              {
                title: "文本动画",
                key: "text-animation",
              },
            ],
          },
          {
            title: `视频素材 (${videoMaterials.length})`,
            key: "video-materials",
            children: videoMaterialNodes,
          },
          {
            title: "音频配置",
            key: "audio",
            disabled: true,
          },
        ],
      },
    ];
  };

  const treeData = generateTreeData();

  return (
    <Form
      form={form}
      layout="vertical"
      onFieldsChange={onFormChange}
      initialValues={{
        canvasWidth: 1920,
        canvasHeight: 1080,
        canvasFps: 30,
        textContent: "生活是美好的，也是残酷的",
        textStartTime: 1,
        textDuration: 8,
        fontSize: 12,
        isBold: true,
        isUnderline: true,
        textOpacity: 0.95,
        textAlign: 1,
        letterSpacing: 5,
        lineSpacing: 8,
        borderOpacity: 0.8,
        borderWidth: 45,
        backgroundStyle: 2,
        backgroundOpacity: 0.7,
        roundRadius: 0.3,
        backgroundHeight: 0.2,
        backgroundWidth: 0.4,
        horizontalOffset: 0.5,
        verticalOffset: 0.6,
        introDuration: 1.5,
        outroDuration: 1,
      }}
    >
      {/* 树形菜单 */}
      <Card
        title="项目配置"
        size="small"
        headStyle={{
          color: "#fff",
          backgroundColor: "#705FBE",
          fontWeight: "bold",
          fontSize: "16px",
        }}
        style={{
          height: "100%",
          overflow: "auto",
        }}
      >
        <Tree
          showLine
          defaultExpandedKeys={["root", "text", "video-materials"]}
          selectedKeys={selectedKeys}
          expandedKeys={expandedKeys}
          onSelect={onSelect}
          onExpand={onExpand}
          treeData={treeData}
          defaultCheckedKeys={["text"]}
          style={{
            fontSize: "14px",
            height: "calc(100% - 100px)",
            overflow: "auto",
          }}
        />

        <Divider style={{ margin: "12px 0" }} />

        <div
          style={{
            textAlign: "center",
            color: "#666",
            fontSize: "12px",
          }}
        >
          <p>💡 点击配置项在右侧查看详细设置</p>
        </div>

        <Button
          type="primary"
          onClick={onCreateProject}
          style={{
            width: "100%",
            marginTop: "12px",
          }}
        >
          创建项目
        </Button>
      </Card>

      {/* 响应式样式 */}
      <style>{`
        .ant-tree-node-content-wrapper:hover {
          background-color: #f0f0f0 !important;
        }
        
        .ant-tree-node-selected {
          background-color: #e6f7ff !important;
        }
      `}</style>
    </Form>
  );
};

export default ProjectConfigFormTree;
